<template>
    <div 
        class="titles-tabs-container"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
    >
        <div 
            class="titles-tabs-wrapper"
            :class="{ 'no-transition': isDragging }"
            :style="{ transform: `translateX(${scrollX}px)` }"
        >
            <div 
                v-for="(title, index) in titles" 
                :key="index"
                class="title-tab-item"
                :class="{ active: selectedTitle === title }"
                @click="handleClick(title)"
            >
                <span class="title-tab-text">{{ title }}</span>
                <div v-if="selectedTitle === title" class="title-tab-indicator"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
    titles: string[]
    selectedTitle: string
}

const props = defineProps<Props>()

const emit = defineEmits<{
    selectTitle: [title: string]
}>()

// 滑动相关状态
const scrollX = ref(0)
const touchStartX = ref(0)
const touchStartY = ref(0)
const touchStartScrollX = ref(0)
const isDragging = ref(false)
const isHorizontalDrag = ref(false)

// 滑动处理
const handleTouchStart = (e: TouchEvent) => {
    e.stopPropagation()
    const touch = e.touches?.[0]
    if (!touch) return
    isDragging.value = true
    isHorizontalDrag.value = false
    touchStartX.value = touch.clientX
    touchStartY.value = touch.clientY
    touchStartScrollX.value = scrollX.value
}

const handleTouchMove = (e: TouchEvent) => {
    if (!isDragging.value) return
    const touch = e.touches?.[0]
    if (!touch) return
    
    const deltaX = Math.abs(touch.clientX - touchStartX.value)
    const deltaY = Math.abs(touch.clientY - touchStartY.value)
    
    // 判断滑动方向：如果水平滑动距离大于垂直滑动距离，则认为是水平滑动
    if (!isHorizontalDrag.value && deltaX > 10) {
        if (deltaX > deltaY) {
            isHorizontalDrag.value = true
        }
    }
    
    // 如果是水平滑动，处理水平滑动
    if (isHorizontalDrag.value) {
        e.stopPropagation()
        e.preventDefault()
        
        const newDeltaX = touch.clientX - touchStartX.value
        const newScrollX = touchStartScrollX.value + newDeltaX
        
        // 计算边界
        const container = e.currentTarget as HTMLElement
        const wrapper = container.querySelector('.titles-tabs-wrapper') as HTMLElement
        if (container && wrapper) {
            const maxScroll = 0
            const wrapperWidth = wrapper.scrollWidth
            const containerWidth = container.offsetWidth
            const minScroll = containerWidth - wrapperWidth
            scrollX.value = Math.max(minScroll, Math.min(maxScroll, newScrollX))
        }
    }
    // 如果是垂直滑动，不阻止默认行为，让页面正常滚动
}

const handleTouchEnd = (e: TouchEvent) => {
    e.stopPropagation()
    isDragging.value = false
    isHorizontalDrag.value = false
}

// 点击处理
const handleClick = (title: string) => {
    if (isDragging.value) return
    emit('selectTitle', title)
}
</script>

<style scoped>
.titles-tabs-container {
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
    position: relative;
    -webkit-overflow-scrolling: touch;
    margin-top: 10px;
}

.titles-tabs-wrapper {
    display: flex;
    gap: 0;
    transition: transform 0.3s ease-out;
    will-change: transform;
    touch-action: pan-y pan-x;
}

.titles-tabs-wrapper.no-transition {
    transition: none;
}

.title-tab-item {
    flex-shrink: 0;
    position: relative;
    padding: 12px 16px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.title-tab-text {
    font-size: 15px;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
}

.title-tab-item.active .title-tab-text {
    color: #3b82f6;
    font-weight: 600;
}

.title-tab-indicator {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: #3b82f6;
    border-radius: 2px;
}
</style>
